import { Fragment } from '@/components/Fragment'; 
import { Heading } from '@aws-amplify/ui-react';

import {
  DefaultHeadingExample,
  HeadingLevelExample,
  HeadingStylePropsExample,
  HeadingThemeExample,
  TruncatedHeading
} from './examples';
import { HeadingDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<HeadingDemo />

## Usage

Import the Heading primitive.

<Example>
  <DefaultHeadingExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultHeadingExample.tsx

    ```

  </ExampleCode>
</Example>

### Heading levels

Use the `level` prop to change the heading level (e.g., `h1 - h6`). Default heading level is `6` and available options are `1`, `2`, `3`, `4`, `5` and `6`.

<Example>
  <HeadingLevelExample />
  <ExampleCode>
    ```jsx file=./examples/HeadingLevelExample.tsx

    ```

  </ExampleCode>
</Example>

### Truncate 

The `isTruncated` prop will render an ellipsis when the Heading text exceeds its allowed width.

<Example>
  <TruncatedHeading />
  <ExampleCode>
    ```jsx file=./examples/TruncatedHeading.tsx

    ```

  </ExampleCode>
</Example>

## CSS Styling

<ThemeExample component="Heading">
  <Example>
    <HeadingThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/HeadingThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Heading" />

### Global styling

To override styling on all Headings, you can set the Amplify CSS variables or use the built-in `.amplify-heading` class.

<Example>
  <Heading class="heading-global-styling" level={3}>Hello world</Heading>
  <ExampleCode>
    ```css
    /* styles.css */
    :root {
      --amplify-components-heading-color: gray;
    }
    /* OR */
    .amplify-heading {
      color: gray;
    }
    ```
  </ExampleCode>
</Example>

Override styles for any `Heading` component `h1 - h6` using the `.amplify-heading--[LEVEL]` classes.

<Example>
  <Heading fontSize="1rem" fontStyle="italic">
    Small and italic
  </Heading>
  <Heading fontSize="2rem" fontWeight="bold">
    Big and bold
  </Heading>
  <ExampleCode>
    ```css
    /* styles.css */
    .amplify-heading--1 {
      font-size: 1rem;
      font-style: italic;
    }

    .amplify-heading--6 {
      font-size: 2rem;
      font-weight: bold;
    }
    ```

  </ExampleCode>
  <ExampleCode>
    ```jsx
    import './styles.css';

    <Heading level={1}>Small and italic</Heading>
    <Heading>Big and bold</Heading>
    ```

  </ExampleCode>
</Example>

### Local styling

To override styling on a specific Heading, you can use a class selector or style props.

_Using a class selector:_

<Example>
  <Heading className="heading-blue" level={3}>
    Hello world
  </Heading>
  <ExampleCode>
  ```css
  /* styles.css */
  .heading-blue {
    color: var(--amplify-colors-blue-80);
  }
  ```

  </ExampleCode>
  <ExampleCode>
    ```jsx
    import './styles.css';

    <Heading className="heading-blue" level={3}>
      Hello world
    </Heading>;
    ```

  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <HeadingStylePropsExample />
  <ExampleCode>
    ```jsx
    <Heading level={3} color="green" fontWeight="bold">
      Hello world
    </Heading>
    ```
  </ExampleCode>
</Example>